<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算</title>
    <link rel="stylesheet" href="./css/settle.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>

    <div class="container">
        <header>
            <nav>
                <p>填写订单</p>
            </nav>
        </header>

        <main>
            <section>
                <ul>
                    <li>
                        <p>收货信息</p>
                        <div>
                            <span>请选择收货信息</span>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>
                    </li>
                    <li>
                        <p>送达日期</p>
                        <div>
                            <span>请选择送达日期</span>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>
                    </li>
                    <li>
                        <p>配送日期</p>
                        <div>
                            <span>不限时段</span>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>
                    </li>
                    <li>
                        <p>配送方式</p>
                        <div>
                            <span>市区免费配送</span>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>
                    </li>
                </ul>
                <hr>
            </section>

            <section>
                <p>订购人信息</p>
                <div>
                    <span>请填写</span>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </section>

            <section>
                <h3>贺卡留言</h3>
                <textarea placeholder="选填 请输入贺卡留言!"></textarea>
                <h3>买家留言</h3>
                <textarea placeholder="选填 请输入买家留言!"></textarea>
            </section>

            <section>
                <div class="leftBox">
                    <img src="./images/settle/module-4.jpeg.png" alt="">
                    <div>
                        <p>永恒回忆</p>
                        <span>×1</span>
                    </div>
                </div>
                <p>￥329</p>
            </section>

            <section>
                <ul>
                    <li>
                        <p class="payTitle">支付方式</p>
                    </li>
                    <li class="show">
                        <div class="wechat">
                            <i class="iconfont icon-wechat-pay"></i>
                            <p>微信</p>
                        </div>
                        <i class="iconfont icon-a-ziyuan642 checked"></i>
                    </li>
                    <li>
                        <div class="zhifubao">
                            <i class="iconfont icon-tubiao_zhifu_zhifubaozhifu"></i>
                            <p>支付宝</p>
                        </div>
                        <i class="iconfont icon-a-ziyuan642 checked"></i>
                    </li>
                </ul>
            </section>

            <section>
                <p>发票</p>
                <div>
                    <span>选填</span>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </section>

            <section>
                <ul>
                    <li>
                        <p>共 1 件商品</p>
                        <p>优惠: -￥0</p>
                    </li>
                    <li>
                        <p>运费:￥0</p>
                        <p>商品总价:<span>￥ 329.00</span></p>
                    </li>
                </ul>
            </section>
        </main>

        <footer>
            <div class="bottomTab">
                <p>实付款:￥<span>329.00</span></p>
                <button><a href="./pay.html">提交订单</a></button>
            </div>
        </footer>
    </div>


</body>

</html>